<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #maxk{
            width: 320px;
            height: 500px;
            border: 4px solid blue;
            margin: 100px auto;
            border-radius: 10px;
        }
        header{
            width: 320px;
            height: 100px;
            margin-top: 20px;
        }
        #heada{
            font-size: 25px;
            width: 320px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #888;
        }
        #headb{
            font-size: 14px;
            width: 320px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            color: #888;
        }
        section{
            width: 320px;
            height: 330px;

        }
        footer{
            width: 320px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 14px;
        }
        section p{
            width: 320px;
            height: 55px;
        }
        .placa{
            width: 280px;
            height: 40px;
            border-radius: 5px;
            margin: 0 20px;
            line-height: 50px;
            text-indent: 1rem;
            border: none;
            border: 1px solid #ccc;
        }
        .placb{
            width: 280px;
            height: 40px;
            border-radius: 5px;
            margin: 0 20px;
            line-height: 50px;
            text-indent: 1rem;
            border: none;
            border: 1px solid #ccc;
            font-size: 16px;
            color: #747f8c;
        }
        #suba{
            width: 130px;
            height: 40px;
            margin:0 18px;
            background: #ff1313;
            border: none;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        #subb{
            width: 130px;
            height: 40px;
            /* margin:0 10px; */
            background: #4ebf2d;
            border: none;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div id="maxk">
        <header>
            <p id="heada">用户注册</p>
            <p id="headb">对新增元素，新增属性的测试案列</p>
        </header>
        <section>
            <!-- <form> -->
                <p id="sect1">
                    <input id="no1" type="text" class="placa" placeholder="请输入用户名">
                </p>
                <p id="sect2">
                    <input id="no2" type="password" class="placa" placeholder="请输入您的密码">
                </p>
                <p id="sect3">
                    <input id="no3" type="password" class="placa" placeholder="请输入您的确认密码">
                </p>
                <p id="sect4">
                    <input id="no4" type="email" class="placa" placeholder="请输入您常用的邮箱地址">
                </p>
                <p id="sect5">
                    <input type="date" class="placb">
                </p>
                <p id="sect6">
                    <input type="submit" value="验证提交" id="suba">
                    <input type="submit" value="无验证提交" id="subb">     
                </p>
            <!-- </form> -->
        </section>
        <footer>    
            <p>已有账号<a href="javascript:;">登录</a></p>
        </footer>
    </div>
</body>
<script>
    console.log(subb)
    subb.onclick = function(){
        alert("请进行验证后提交")
        // console.log(111)
    }
    suba.onclick = function(e){
        e.preventDefault();
        var no11 = no1.value;
        var no22 = no2.value;
        var no33 = no3.value;
        var no44 = no4.value;
        console.log(no11)
        var opj = {
            nome:no11,
            password1:no22,
            password2:no33,
            email:no44
        }
        var all = localStorage.getItem('list');
        if(all){
            all = JSON.parse(all);
            all.push(opj);
            localStorage.setItem('list',JSON.stringify(all))
        }else{
            localStorage.setItem('list',JSON.stringify([opj]))
        }
        console.log(all)
        console.log(all[all.length-1]);
    }
</script>
</html>